<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>我的订单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		body,.mui-content {
			background: #fff;
		}
		.mui-bar-nav {
			background: #86CAF9;
		}
		.mui-bar .mui-icon {
			color: #fff;
		}
		.mui-title {
			color: #fff;
		}
		.dividing-line {
			margin-top: 5px;
			width: 100%;
			height: 15px;
			background: #efeff4;
		}
		.mui-segmented-control.mui-segmented-control-inverted {
			margin-top: 5px;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
			color: #86CAF9;
    		border-bottom: 2px solid #86CAF9;
		}
		.mui-segmented-control.mui-segmented-control-inverted .mui-control-item {
			color: #666;
		}
		.list-ul {
			margin-top: 10px;
			display: flex;
			flex-direction: column;
		}
		.list-li {
			padding: 0 10px;
			margin-bottom: 17px;
		}
		.list-body {
			position: relative;
			height: 150px;
			display: flex;
			flex-direction: row;
			border-radius: 5px;
			box-shadow:0px 1px 10px 0px rgba(91,169,249,0.57);
		}
		.list-left-img {
			width: 160px;
			height: 125px;
			position: relative;
		}
		.list-img {
			border-top-left-radius: 5px;
			width: 160px;
			height: 125px;
		}
		.list-content {
			padding: 5px 8px 0 6px;
			flex: 1;
		}
		.content-title {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333;
		}
		.content-score {
			margin-top: 10px;
			font-size: 12px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #53A5F9;
		}
		.content-price {
			font-size: 14px;
			font-family: PingFang SC;
			color: #FD5C5C;
		}
		.tap-address {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 56px;
			height: 18px;
			background:rgba(27,27,27,0.6);
			font-size: 10px;
			text-align: center;
			color: #fff;
			line-height: 18px;
			border-top-right-radius:8px;
		}
		.tap-address img {
			vertical-align: middle;
			width: 10px;
			height: 13px;
		}
		.tap-address span {
			vertical-align: middle;
		}
		.total-price-status {
			display: flex;
			justify-content: space-between;
		}
		.total-price-num {
			font-size: 12px;
			font-family:PingFang SC;
			color: #666;
		}
		.order-status {
			font-size: 14px;
			font-family:PingFang SC;
			color: #FD5C5C;
		}
		.order-btn {
			text-align: right;
		}
		.order-btn .mui-btn {
			padding: 5px 10px;
		}
		.car-type {
			font-size: 12px;
			font-family:PingFang SC;
			color: #666;
		}
		
		/*上拉加载下拉刷新*/
		.mui-control-content {
			position: static;
		}
		.mui-scroll-wrapper {
			top: 109px;
		}
		.mui-bar~.mui-content .mui-fullscreen {
			top: 100px;
			height: auto;
		}
		.mui-pull-top-tips {
			position: absolute;
			top: -20px;
			left: 50%;
			margin-left: -25px;
			width: 40px;
			height: 40px;
			border-radius: 100%;
			z-index: 1;
		}
		.mui-bar~.mui-pull-top-tips {
			top: 44px;
		}
		.mui-pull-top-wrapper {
			width: 42px;
			height: 42px;
			display: block;
			text-align: center;
			background-color: #efeff4;
			border: 1px solid #ddd;
			border-radius: 25px;
			background-clip: padding-box;
			box-shadow: 0 4px 10px #bbb;
			overflow: hidden;
		}
		.mui-pull-top-tips.mui-transitioning {
			-webkit-transition-duration: 200ms;
			transition-duration: 200ms;
		}
		.mui-pull-top-tips .mui-pull-loading {
			/*-webkit-backface-visibility: hidden;
			-webkit-transition-duration: 400ms;
			transition-duration: 400ms;*/
			
			margin: 0;
		}
		.mui-pull-top-wrapper .mui-icon,
		.mui-pull-top-wrapper .mui-spinner {
			margin-top: 7px;
		}
		.mui-pull-top-wrapper .mui-icon.mui-reverse {
			/*-webkit-transform: rotate(180deg) translateZ(0);*/
		}
		.mui-pull-bottom-tips {
			text-align: center;
			background-color: #efeff4;
			font-size: 15px;
			line-height: 40px;
			color: #777;
		}
		.mui-pull-top-canvas {
			overflow: hidden;
			background-color: #fafafa;
			border-radius: 40px;
			box-shadow: 0 4px 10px #bbb;
			width: 40px;
			height: 40px;
			margin: 0 auto;
		}
		.mui-pull-top-canvas canvas {
			width: 40px;
		}
		.mui-slider-indicator.mui-segmented-control {
			background-color: #efeff4;
		}
		.no-data {
			display: none;
			font-size: 14px;
			color: #666;
			margin-top: 30px;
			text-align: center;
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<h1 class="mui-title">我的订单</h1>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	</header>
	<div class="mui-content">
		<div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
			<a class="mui-control-item mui-active" href="#item1">全部</a>
			<a class="mui-control-item" href="#item2">待付款</a>
			<a class="mui-control-item" href="#item3">未出行</a>
			<a class="mui-control-item" href="#item4">待点评</a>
		</div>
		<div class="dividing-line"></div>
		<div id="item1" class="mui-control-content mui-active">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="list-ul">
						<!--<div class="list-li">
							<div class="list-body">
								<div class="list-left-img">
									<img class="list-img" src="../img/homePage/home-beijing.png" />
									<div class="tap-address">
				        				<span>周游券</span>
									</div>
								</div>
								<div class="list-content">
									<div class="content-title mui-ellipsis-2">【东京迪士尼乐园】令人难忘的童话世界</div>
									<div class="content-price">¥ 123起</div>
									<div class="total-price-status">
										<div class="total-price-num">
											<div class="order-num">X1</div>
											<div class="total-price">合计：123</div>
										</div>
										<div class="order-status">
											待付款
										</div>
									</div>
									<div class="order-btn">
										<button type="button" class="mui-btn mui-btn-outlined">立即支付</button>
									</div>
								</div>
							</div>
						</div>-->
						
					</div>
				</div>
			</div>
			<div class="no-data">暂无数据...</div>
		</div>
		<div id="item2" class="mui-control-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="list-ul">
				
					</div>	
				</div>
			</div>		
			<div class="no-data">暂无数据...</div>
		</div>
		<div id="item3" class="mui-control-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="list-ul">
				
					</div>	
				</div>
			</div>	
			<div class="no-data">暂无数据...</div>
		</div>
		<div id="item4" class="mui-control-content">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="list-ul">
				
					</div>	
				</div>
			</div>	
			<div class="no-data">暂无数据...</div>
		</div>
	</div>	
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script src="../js/thirdparty/mui.pullToRefresh.js"></script>
	<script src="../js/thirdparty/mui.pullToRefresh.material.js"></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js?version=1" ></script>
	<script>
		mui.init();
		var customerId = base.getParameter("customerId");
		var orderType = base.getParameter("orderType");
		var pageData = [{pageNo: 1,refresh: 'down'},{pageNo: 1,refresh: 'down'},{pageNo: 1,refresh: 'down'},{pageNo: 1,refresh: 'down'}] 
		var self = null;
		var initPage = [2,1,1,1];
		(function($) {
			//阻尼系数
			var deceleration = mui.os.ios?0.003:0.0009;
			$('.mui-scroll-wrapper').scroll({
				bounce: false,
				indicators: true, //是否显示滚动条
				deceleration:deceleration
			});
			$.ready(function() {
				//循环初始化所有下拉刷新，上拉加载。
				$.each(document.querySelectorAll('.mui-control-content .mui-scroll'), function(index, pullRefreshEl) {
					$(pullRefreshEl).pullToRefresh({
						down: {
							callback: function() {
								self = this;
								pageData[orderType].refresh = 'down';
								pageData[orderType].pageNo = 1;
								getTravelOrderList();
							}
						},
						up: {
							callback: function() {
								self = this;
								pageData[orderType].refresh = 'up';
								pageData[orderType].pageNo ++;
								getTravelOrderList();
							}
						}
					});
				});
			});
		})(mui);
		
		$(function() {
			$("#segmentedControl").find(".mui-control-item").removeClass("mui-active");
			$(".mui-control-content").removeClass("mui-active");
			$("#segmentedControl").find(".mui-control-item").each(function(i) {
				if (i == orderType) {
					$(this).addClass("mui-active");
				}
			});
			$(".mui-control-content").each(function(i) {
				if (i == orderType) {
					$(this).addClass("mui-active");
				}
			});
			//初始化微信 用于支付
			base.initWX(function () {});
			getTravelOrderList();
		});
		//点击tab切换
		$(".mui-control-item").on('tap', function() {
			var _orderType = 0;
			if ($(this).attr("href") == "#item1") {
				_orderType = 0;
			} else if ($(this).attr("href") == "#item2") {
				_orderType = 1;
			} else if ($(this).attr("href") == "#item3") {
				_orderType = 2;
			} else if ($(this).attr("href") == "#item4") {
				_orderType = 3;
			}
			if (_orderType == orderType) {
				return;
			}else {
				orderType = _orderType;
			}
			if (initPage[_orderType] == 1) {
				self = null;
				initPage[_orderType] = 2;
				getTravelOrderList();
			}
			
		});
		//获取订单列表
		function getTravelOrderList() {
			var data = {
				customerId: customerId,
				type: orderType,
				pageNo: pageData[orderType].pageNo
			}
			base.postData(base.url.getTravelOrderList, data, function(data) {
				if (data.success) {
					var html = '';
					for (var i=0; i<data.extendData.visaTravelOrderList.length; i++) {
						html += pingTravelOrderList(data.extendData.visaTravelOrderList[i]);
					}
					if (pageData[orderType].pageNo == 1 && data.extendData.visaTravelOrderList.length == 0) {
						$("#item"+(orderType+1)).find(".mui-scroll-wrapper").hide();
						$("#item"+(orderType+1)).find(".no-data").show();
					}
					$(".mui-control-content").each(function(i) {
						if (i == orderType) {
							if (pageData[orderType].refresh == 'down') {
								$(this).find(".list-ul").html(html);
							}else{
								$(this).find(".list-ul").append(html);
							}
						}
					});
					if (pageData[orderType].refresh == 'down') {
						if (self != null) {
							self.endPullDownToRefresh();	
							self.refresh(true);
						}
					}else {
						if (data.extendData.visaTravelOrderList.length < 20) {
							if (self != null) {
								self.endPullUpToRefresh(true);
							}
						}else {
							if (self != null) {
								self.endPullUpToRefresh();
							}
						}
					}
				} else {
					mui.toast(data.message);
				}
			});	
		}
		function pingTravelOrderList(data) {
			var status = "待付款";
			if (data.state == 2) {
				status = "未出行";
			}else if (data.state == 3) {
				status = "待点评"
			}else if (data.state == 4) {
				status = "已点评"
			}
			var html = '<div class="list-li">'+
						'	<div class="list-body">'+
						'		<input type="hidden" name="orderNo" value="'+data.orderNo+'" />'+
						'		<input type="hidden" name="objId" value="'+data.objId+'" />'+
						'		<input type="hidden" name="ticketType" value="'+data.type+'" />'+
						'		<div class="list-left-img">'+
						'			<img class="list-img" src="'+data.imgUrl+'" />'+
						'			<div class="tap-address">'+
				        '				<span>'+(data.type==1?"门票":data.type==2?"周游券":"租车")+'</span>'+
						'			</div>'+
						'		</div>'+
						'		<div class="list-content">'+
						'			<div class="content-title mui-ellipsis-2">'+data.name+'</div>';
					if (data.type==3) {	
				html +=	'			<div class="car-type">'+data.gear+"/"+data.seat+"座/"+data.carTypeName+'</div>';
					}	
				html +=	'			<div class="content-price">¥ '+data.price+'</div>'+
						'			<div class="total-price-status">'+
						'				<div class="total-price-num">'+
						'					<div class="order-num">'+(data.type==3?data.number+"天":"X"+data.number)+'</div>'+
						'					<div class="total-price">合计：'+data.orderPrice+'</div>'+
						'				</div>'+
						'				<div class="order-status">'+status+'</div>'+
						'			</div>'+
						'			<div class="order-btn">';
					if (data.state == 1) {
				html +=	'				<button type="button" class="mui-btn mui-btn-outlined pay-btn">立即支付</button>';
					} else if (data.state == 2) {
				html +=	'				<button type="button" class="mui-btn mui-btn-outlined trip-btn">确认出行</button>';
					} else if (data.state == 3) {
				html +=	'				<button type="button" class="mui-btn mui-btn-outlined evaluate-btn">去点评</button>';
					} 
				html +=	'			</div>'+
						'		</div>'+
						'	</div>'+
						'</div>';
			return html;
		}
		//立即支付
		$(".mui-control-content").on('tap', '.list-li .pay-btn', function(){
			var orderNo = $(this).closest(".list-li").find("input[name='orderNo']").val();
			var isWechat = base.isOnWx();
			var params = {
				orderNo: orderNo,
				customerId: customerId
			}
			if (isWechat) {
				base.weChatPayTravel(params, function(rse) {
					//支付成功
					mui.toast('支付成功');
					getTravelOrderList();//刷新订单列表
				}, function() {
					//取消支付
				}, function() {
					//支付失败
					mui.toast('支付失败，请稍后再试！')
				});
			} else {
				base.postData(base.url.travelOrderPerpayH5,params,function(data) {
					var cfg = data.extendData;
					if (data.success) {
						if(data.extendData.mweb_url) {
							var urlPath = root_host+'ry_visa_web/pages/admissionOrderList.html?customerId='+customerId+"&orderType="+orderType;
							window.location.href = data.extendData.mweb_url+'&redirect_url='+encodeURIComponent(urlPath);
						}
					} else {
						mui.toast(data.message);
					}
				});
			}
		});
		//确认出行
		$(".mui-control-content").on('tap', '.list-li .trip-btn', function(){
			var orderNo = $(this).closest(".list-li").find("input[name='orderNo']").val();
			var btnArray = ['是', '否'];
			mui.confirm('是否确认已出行？', '是否确认', btnArray, function(e) {
				if (e.index == 0) {
					var params = {
						orderNo: orderNo,
						customerId: customerId
					}
					base.postData(base.url.updateTravelOrderList, params, function(data) {
						if (data.success) {
							getTravelOrderList();//刷新订单列表
						}else {
							mui.toast(data.message);
						}
					});
				}
			})
		});	
		//去点评
		$(".mui-control-content").on('tap', '.list-li .evaluate-btn', function(){
			var orderNo = $(this).closest(".list-li").find("input[name='orderNo']").val();
			var objId = $(this).closest(".list-li").find("input[name='objId']").val();
			var ticketType = $(this).closest(".list-li").find("input[name='ticketType']").val();
			window.location.href = "evaluateTicket.html?customerId="+customerId+"&orderNo="+orderNo+"&objId="+objId+"&ticketType="+ticketType;
		});
	</script>
</body>
</html>
